<template>
<view>
<!--address_list.wxml-->

<view class="container">
  <radio-group class="radio-group" @change="radioChange">
    <view v-for="(item, index) in addresses" :key="index" class="address-box">
        <view class="address-user">
                    <label class="radio">                        
                            <radio :value="index" :checked="index==selected?true:false"></radio>                     
                    </label>
        </view>
        <view class="address-info" @tap="selectAddress" :data-item="item">
            <view class="mobile flex"><view><text>{{item.shop_name}}</text></view> <text v-if="index == 0" class="text-center">离我最近</text> <text class="float">{{item.distance_text}}</text></view>
           
            <view class="address text">{{item.shop_address}} <image class="float" @tap.stop="shop_page" :data-id="item.shop_id" src="/static/images/z-dingw1.png"></image></view>
              <view class="mobile text">{{item.phone}}</view>
        </view>
     
    </view>            
     </radio-group>
     
  
</view>

    <view class="set-mes">
    <view class="use-item set-item " @tap.stop="getUser">
            <view class="text-overflow">提货人 : <text class="text">{{name}}</text>   </view>
             <view class="text-overflow">电话 : <text class="text">{{mobile}}</text>   </view>         
            <view>                 
                <image class="arrow-rigth" src="/static/images/icon-arrowdown.png" @tap.stop="getUser"></image>
            </view>
        </view>
    </view>

  <navigator class="address-create" url="/pages/user/add_address/add_address">
        <view class="create-btn" @tap.stop="formSubmit">确定</view>
    </navigator>
</view>
</template>

<script>
var app = getApp();
var request = require("../../../utils/request.js");

export default {
  data() {
    return {
      url: app.globalData.setting.url,
      resourceUrl: app.globalData.setting.resourceUrl,
      addresses: null,
      //请求的地址列表
      name: '',
      mobile: '',
      datas: null,
      is_set: false,
      selected: 0,
      webUrl: ""
    };
  },

  components: {},
  props: {},
  onLoad: function (options) {
    var datas = JSON.parse(options.datas);
    this.requestAddressList(datas);
    options.datas && this.setData({
      name: datas.consignee,
      mobile: datas.mobile,
      datas: options.datas,
      selected: options.selected
    });
  },
  onShow: function () {
    if (this.is_set) {
      let datas = JSON.parse(this.datas);
      datas.consignee = this.name;
      datas.mobile = this.mobile;
      this.setData({
        name: this.name,
        mobile: this.mobile,
        datas: JSON.stringify(datas)
      });
    }
  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.requestAddressList();
  },
  methods: {
    shop_page(e) {
      var id = e.currentTarget.dataset.id;
      this.setData({
        webUrl: "/mobile/Cart/shop?shop_id=" + id
      });
      uni.navigateTo({
        url: '/pages/index/webview/webview'
      });
    },

    /** 请求自提点地址列表数据 */
    requestAddressList: function (datas) {
      var that = this;
      uni.authorize({
        scope: 'scope.userLocation',
        success: function (res) {
          uni.getLocation({
            type: 'wgs84',

            success(res2) {
              request.post('/Home/Api/shop', {
                data: {
                  province_id: datas.province,
                  city_id: datas.city,
                  district_id: datas.district,
                  shop_address: '',
                  //datas.address
                  longitude: res2.longitude,
                  latitude: res2.latitude
                },
                successReload: true,
                success: function (res) {
                  that.setData({
                    addresses: res.data.result
                  });
                  uni.stopPullDownRefresh();
                }
              });
            }

          });
        }
      });
    },
    radioChange: function (e) {
      this.setData({
        selected: e.detail.value
      });
    },
    getUser: function () {
      uni.navigateTo({
        url: '../../cart/submit_people/submit_people?datas=' + this.datas
      });
    },
    formSubmit: function () {
      let data = this.addresses[this.selected];
      let user = JSON.parse(this.datas);
      let pages = getCurrentPages(); //当前页面

      let prevPage = pages[pages.length - 2]; //上一页面
      //直接给上移页面赋值 

      prevPage.setData({
        is_set: true,
        'submit_datas.shop_id': data.shop_id,
        'submit_datas.submit_address': data.shop_name,
        'submit_datas.name': user.consignee,
        'submit_datas.mobile': user.mobile,
        selected: this.selected
      });
      uni.navigateBack({
        delta: 1
      });
    }
  }
};
</script>
<style>
/* address_list.wxss */
page{
    background-color: white;
}
.container{
    overflow:scroll;
    height:500px;
}
.address-box{
    overflow:hidden;
    border:1px solid #f3f3f3;
    width:92%;
    margin:0 auto;
    padding:20rpx 0;
    box-shadow:0 2px 18rpx #ededed;
    font-size: 28rpx;
    margin-top: 20rpx;
}
.address-user{
    margin-top:20px;
    box-sizing: border-box;
    float: left;
    width:80rpx;
    padding-left: 20rpx;
}
.user-name{
    font-size: 30rpx;
    padding-bottom: 20rpx;
    word-break:keep-all;
    white-space:nowrap;
    text-overflow:ellipsis;
    overflow: hidden;
}
.default{
    color: white;
    background-color: #ff6a00;
    padding: 4rpx;
    width:fit-content;
    border-radius:6rpx;
}
.address-info{
    box-sizing: border-box;
    float: left;
    width: 550rpx;
    padding-left: 10rpx;
}
.mobile{
    padding-bottom: 25rpx;
    justify-content: space-between;
}
.flex view{
    width: 190rpx;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}
.address{
    height: 70rpx;
    overflow: hidden;
}
.address-edit{
    box-sizing: border-box;
    width:112rpx;
    float: left;
    text-align: center;
    padding-top: 32rpx;
}
image{
    width: 36rpx;
    height: 42rpx;
}
.address-create{
    width: 80%;
    text-align: center;
    bottom: 80rpx;
    margin:auto;
}
.create-btn{
    font-size: 28rpx;
    color: white;
    background-color: #ff6a00;
    border-radius: 10rpx;
    text-align: center;
    line-height: 80rpx;
    display: block;
}
.text{
    color:darkgray;
}
.float{
    float: right;
}
.text-center{
    background-color:red;
    color:white;
    border-radius:9px;
    width:120rpx;
    padding:3px;
}

.set-mes{
    background-color: #fff;
    font-size: 30rpx;
    color: #444;
}
.set-mes>view{
    display: flex;
    align-items: center;
    height: 92rpx;
    border-bottom: 1px solid #f3f3f3;
}
.set-item{
    justify-content: space-between;
    overflow:hidden;
    border:1px solid #f3f3f3;
    width:92%;
    margin:0 auto 20rpx;
    box-shadow:0 2px 18rpx #ededed;
}
.text-overflow{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    margin-left: 20rpx;
}
</style>